<template>
  <div class="container">
    <div class="title-container">
      集输报警数据分析
      <img
        class="title-img"
        style="height: 70px; width: 100%"
        src="../../../assets/imgs/head2.svg"
      />
      <div class="bottom-line" />
    </div>
    <div class="data-container">
      <div class="left-container">
        <div class="top-box">
          <div class="info-item1">
            <span class="item-title">总报警：</span>
            <span class="item-data">54821</span>
            <div class="panel-footer"></div>
          </div>
          <div class="info-item2">
            <span class="item-title">今日报警：</span>
            <span class="item-data">781</span>
            <div class="panel-footer"></div>
          </div>
          <div class="info-item1">
            <span class="item-title">报警热区：</span>
            <span class="item-data" style="color: #75f9fd">采油1站</span>
            <div class="panel-footer"></div>
          </div>
          <div class="info-item2"><div class="panel-footer"></div></div>
        </div>
        <div class="left-chart-container">
          <div class="left-panel">
            <div class="month-warning-table-box">
              <div class="title-box">
                各站报警
                <img
                  class="sub-title-img"
                  src="../../../assets/imgs/subtitle_1.svg"
                />
              </div>
              <div class="search-box">
                <el-date-picker
                  v-model="monthWarningSearchParams.year"
                  type="year"
                  placeholder="选择年份"
                  size="mini"
                  style="width: 125px"
                  clearable
                />
              </div>

              <div class="warning-table">
                <el-table
                  :data="dialogTableData"
                  style="width: 100%"
                  :height="'85%'"
                  :row-style="rowStyle"
                  :cell-style="columnStyle"
                  :header-cell-style="headerStyle"
                  border="true"
                >
                  <el-table-column
                    prop="station"
                    label="站点"
                    width="100"
                    fixed="left"
                  />
                  <el-table-column prop="name" label="1月" width="70" />
                  <el-table-column prop="name" label="2月" width="70" />
                  <el-table-column prop="level" label="3月" width="70">
                    <!-- <template slot-scope="scope">
                      <el-tag
                        v-if="scope.row.level == 1"
                        size="mini"
                        effect="dark"
                        >1级</el-tag
                      >
                      <el-tag
                        v-else-if="scope.row.level == 2"
                        size="mini"
                        effect="dark"
                        type="warning"
                        >2级</el-tag
                      >
                      <el-tag v-else size="mini" effect="dark" type="danger"
                        >3级</el-tag
                      >
                    </template> -->
                  </el-table-column>
                  <el-table-column prop="date" label="4月" width="70" />
                  <el-table-column prop="date" label="5月" width="70" />
                  <el-table-column prop="date" label="6月" width="" />
                  <!-- <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                      <el-button
                        @click="handleClick(scope.row)"
                        type="text"
                        size="small"
                        >查看</el-button
                      >
                    </template>
                  </el-table-column> -->
                </el-table>
              </div>
            </div>
            <div class="station-warning-chart-box">
              <div class="panel-footer"></div>
              <div class="title-box">
                站点报警
                <!-- <img
                  class="sub-title-img"
                  src="../../../assets/imgs/subtitle_1.svg"
                /> -->
              </div>
              <el-form
                :inline="true"
                :model="formInline"
                class="month-warning-form"
                size="mini"
              >
                <el-form-item label="区块">
                  <el-select
                    style="width: 100px"
                    v-model="formInline.region"
                    placeholder="选择区块"
                    clearable
                  >
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="站点">
                  <el-select
                    style="width: 100px"
                    v-model="formInline.region"
                    placeholder="选择站点"
                    clearable
                  >
                    <el-option label="密闭1站" value="shanghai"></el-option>
                    <el-option label="密闭2站" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
              </el-form>
              <div class="station-chart-panel">
                <div id="station-chart" class="station-chart"></div>
              </div>
            </div>
          </div>
          <div class="right-panel">
            <div class="everyday-warning-chart-box">
              <div class="title">今日报警</div>
              <el-form
                :inline="true"
                :model="formInline"
                class="everyday-warning-form"
                size="mini"
              >
                <el-form-item label="区块">
                  <el-select
                    style="width: 100px"
                    v-model="formInline.region"
                    placeholder="选择区块"
                    clearable
                  >
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="站点">
                  <el-select
                    clearable
                    style="width: 100px"
                    v-model="formInline.region"
                    placeholder="选择站点"
                  >
                    <el-option label="密闭1站" value="shanghai"></el-option>
                    <el-option label="密闭2站" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
              </el-form>
              <div class="everyday-chart-box">
                <div id="everyday-chart" class="everyday-chart"></div>
              </div>
            </div>
            <div class="everyday-hot-warning-list-box">
              <div class="title">主要报警参数</div>
              <div class="item-list">
                <div class="item">
                  <span class="name">淋水空冷器出口温度</span>
                  <span class="number">18条</span>
                </div>
                <div class="item">
                  <span class="name">淋水空冷器出口温度</span>
                  <span class="number">18条</span>
                </div>
                <div class="item">
                  <span class="name">淋水空冷器出口温度</span>
                  <span class="number">18条</span>
                </div>
                <div class="item">
                  <span class="name">淋水空冷器出口温度</span>
                  <span class="number">18条</span>
                </div>
                <div class="item">
                  <span class="name">淋水空冷器出口温度</span>
                  <span class="number">18条</span>
                </div>
                <div class="item">
                  <span class="name">淋水空冷器出口温度</span>
                  <span class="number">18条</span>
                </div>
                <div class="item">
                  <span class="name">淋水空冷器出口温度</span>
                  <span class="number">18条</span>
                </div>
                <div class="item">
                  <span class="name">淋水空冷器出口温度</span>
                  <span class="number">18条</span>
                </div>
                <div class="item">
                  <span class="name">淋水空冷器出口温度</span>
                  <span class="number">18条</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right-container">
        <div class="title">报警统计</div>
        <div class="chart-box">
          <div class="item-chart-box">
            <el-form
              :inline="true"
              :model="formInline"
              style="height: 30px"
              size="mini"
            >
              <el-form-item label="年份">
                <el-date-picker
                  v-model="monthWarningSearchParams.year"
                  type="years"
                  placeholder="年"
                  size="mini"
                  style="width: 90px"
                  clearable
                ></el-date-picker>
              </el-form-item>
              <!-- <el-form-item label="站点">
                <el-select
                  style="width: 100px"
                  v-model="formInline.region"
                  placeholder="选择站点"
                >
                  <el-option label="密闭1站" value="shanghai"></el-option>
                  <el-option label="密闭2站" value="beijing"></el-option>
                </el-select>
              </el-form-item> -->
              <!-- <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
              </el-form-item> -->
            </el-form>
            <div id="item-chart_1" class="item-chart"></div>
          </div>

          <div class="item-chart-box">
            <el-form
              :inline="true"
              :model="formInline"
              style="height: 35px"
              size="mini"
            >
              <el-form-item label="月份">
                <el-date-picker
                  v-model="monthWarningSearchParams.year"
                  type="month"
                  placeholder="月"
                  size="mini"
                  style="width: 90px"
                  clearable
                ></el-date-picker>
              </el-form-item>
            </el-form>
            <div id="item-chart_2" class="item-chart"></div>
          </div>
          <div class="item-chart-box">
            <el-form
              :inline="true"
              :model="formInline"
              style="height: 35px"
              size="mini"
            >
              <el-form-item label="日期">
                <el-date-picker
                  v-model="monthWarningSearchParams.year"
                  type="date"
                  placeholder="日"
                  size="mini"
                  style="width: 90px"
                  clearable
                ></el-date-picker>
              </el-form-item>
            </el-form>
            <div id="item-chart_3" class="item-chart"></div>
          </div>
          <div class="item-chart-box">
            <el-form
              :inline="true"
              :model="formInline"
              style="height: 35px"
              size="mini"
            >
              <el-form-item label="时间段">
                <el-time-picker
                  is-range
                  v-model="value1"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  placeholder="选择时间范围"
                  style="width: 200px"
                  format="HH:mm"
                  :selectableRange="'00:00:00 - 23:00:00'"
                >
                </el-time-picker>
              </el-form-item>
            </el-form>
            <div id="item-chart_4" class="item-chart"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      value1: [new Date(2024, 9, 10, 8, 0), new Date(2016, 9, 10, 12, 0)],
      formInline: {},
      monthWarningSearchParams: { year: "" },
      dialogTableData: [
        {
          name: "124",
          resource: "124",
          station: "特一联",
   //       date: "113",
          level: 324,
        },
        {
          name: "126",
          resource: "134",
          station: "特二联",
      //    date: "178",
          level: 312,
        },

        {
          name: "214",
          resource: "114",
          station: "稠油处理站",
      //    date: "220",
          level: 234,
        },
      ],
      optionTotal: {
        color: ["#75f9fd", "#e5323e"],
        title: {
          text: "总进出水量",
          textStyle: {
            color: "#fff",
            fontSize: 20,
          },
        },
        grid: {
          right: "10%",
          left: "13%",
          bottom: "15%",
          top: "13%",
        },
        toolbox: {
          right: "5%",
          feature: {
            saveAsImage: {
              backgroundColor: "#0b1539",
              excludeComponents: ["dataZoom", "toolbox"],
            },
          },
          iconStyle: { borderColor: "#fff" },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        legend: { show: true, textStyle: { color: "#fff" } },
        dataZoom: {
          type: "slider",
          height: 25,
          show: true,
          startValue: 0,
          endValue: 7,
          xAxisIndex: [0],
          bottom: "0%",
        },
        xAxis: {
          axisLabel: {
            color: "#fff",
          },
          data: [
            "07/16",
            "07/17",
            "07/18",
            "07/19",
            "07/20",
            "07/21",
            "07/22",
            "07/23",
          ],
        },
        yAxis: {
          axisLabel: {
            color: "#fff",
          },
        },
        series: [
          {
            name: "总进水量",
            type: "line",
            data: [54000, 53000, 52000, 54123, 56128, 55520, 54213, 54712],
          },
          {
            name: "总出水量",
            type: "line",
            data: [55555, 55520, 55536, 55510, 55510, 55520, 51203, 53621],
          },
        ],
      },
      optionStation: {
        color: ["#75f9fd", "#e5323e"],
        title: {
          //    text: "总进出水量",
          textStyle: {
            color: "#fff",
            fontSize: 20,
          },
        },
        grid: {
          right: "10%",
          left: "13%",
          bottom: "15%",
          top: "13%",
        },
        toolbox: {
          right: "5%",
          feature: {
            saveAsImage: {
              backgroundColor: "#0b1539",
              excludeComponents: ["dataZoom", "toolbox"],
            },
          },
          iconStyle: { borderColor: "#fff" },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        legend: { show: true, textStyle: { color: "#fff" } },
        dataZoom: {
          type: "slider",
          height: 25,
          show: true,
          startValue: 0,
          endValue: 7,
          xAxisIndex: [0],
          bottom: "0%",
        },
        xAxis: {
          axisLabel: {
            color: "#fff",
          },
          data: [
            "密闭1#",
            "密闭2#",
            "密闭3#",
            "密闭4#",
            "密闭5#",
            "密闭6#",
            "密闭7#",
            "密闭8#",
          ],
        },
        yAxis: {
          axisLabel: {
            color: "#fff",
          },
        },
        series: [
          {
          //  name: "总进水量",
            type: "bar",
            data: [160, 172, 200, 143, 260, 147, 220, 241],
            itemStyle: {
              //  color: "#F43368",
              barBorderRadius: [3, 3, 0, 0], // （顺时针左上，右上，右下，左下）
            },
          },
          // {
          //   name: "总出水量",
          //   type: "line",
          //   data: [55555, 55520, 55536, 55510, 55510, 55520, 51203, 53621],
          // },
        ],
      },
      optionEveryday: {
    //    color: ["#75f9fd", "#e5323e"],
        title: {
          //    text: "总进出水量",
          textStyle: {
            color: "#fff",
            fontSize: 20,
          },
        },
        grid: {
          right: "10%",
          left: "13%",
          bottom: "15%",
          top: "13%",
        },
        toolbox: {
          right: "5%",
          feature: {
            saveAsImage: {
              backgroundColor: "#0b1539",
              excludeComponents: ["dataZoom", "toolbox"],
            },
          },
          iconStyle: { borderColor: "#fff" },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        legend: { show: true, textStyle: { color: "#fff" } },
        dataZoom: {
          type: "slider",
          height: 25,
          show: true,
          startValue: 0,
          endValue: 7,
          xAxisIndex: [0],
          bottom: "0%",
        },
        xAxis: {
          axisLabel: {
            color: "#fff",
          },
          data: [
            "11:00",
            "12:00",
            "13:00",
            "14:00",
            "15:00",
            "16:00",
            "17:00",
            "18:00",
          ],
        },
        yAxis: {
          axisLabel: {
            color: "#fff",
          },
        },
        series: [
          {
            name: "各时段报警",
            type: "bar",
            data: [16, 17, 47, 25, 44, 35, 42, 26],
            itemStyle: {
              //  color: "#F43368",
              barBorderRadius: [5, 5, 0, 0], // （顺时针左上，右上，右下，左下）
            },
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#75f9fd", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#83bff6", // 100% 处的颜色
                },
              ],
            },
          },
        ],
      },
      optionYear: {
        color: ["#bd3214"],
        title: {
          //    text: "总进出水量",
          textStyle: {
            color: "#fff",
            fontSize: 20,
          },
        },
        grid: {
          right: "10%",
          left: "13%",
          bottom: "15%",
          top: "13%",
        },
        toolbox: {
          right: "5%",
          feature: {
            saveAsImage: {
              backgroundColor: "#0b1539",
              excludeComponents: ["dataZoom", "toolbox"],
            },
          },
          iconStyle: { borderColor: "#fff" },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        legend: { show: true, textStyle: { color: "#fff" } },
        dataZoom: {
          type: "slider",
          height: 25,
          show: true,
          startValue: 0,
          endValue: 7,
          xAxisIndex: [0],
          bottom: "0%",
        },
        xAxis: {
          axisLabel: {
            color: "#fff",
          },
          data: ["2021", "2022", "2023", "2024"],
        },
        yAxis: {
          axisLabel: {
            color: "#fff",
          },
        },
        series: [
          {
            name: "各年份报警",
            type: "bar",
            data: [16, 17, 47, 25, 44, 35, 42, 26],
            itemStyle: {
              //  color: "#F43368",
              barBorderRadius: [5, 5, 0, 0], // （顺时针左上，右上，右下，左下）
            },
          },
        ],
      },
      optionMonth: {
        color: ["#ff7372"],
        title: {
          //    text: "各月报警",
          textStyle: {
            color: "#fff",
            fontSize: 20,
          },
        },
        grid: {
          right: "10%",
          left: "13%",
          bottom: "15%",
          top: "13%",
        },
        toolbox: {
          right: "5%",
          feature: {
            saveAsImage: {
              backgroundColor: "#0b1539",
              excludeComponents: ["dataZoom", "toolbox"],
            },
          },
          iconStyle: { borderColor: "#fff" },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        legend: { show: true, textStyle: { color: "#fff" } },
        dataZoom: {
          type: "slider",
          height: 25,
          show: true,
          startValue: 0,
          endValue: 7,
          xAxisIndex: [0],
          bottom: "0%",
        },
        xAxis: {
          axisLabel: {
            color: "#fff",
          },
          data: ["1月", "2月", "3月", "4月","5月","6月","7月"],
        },
        yAxis: {
          axisLabel: {
            color: "#fff",
          },
        },
        series: [
          {
            name: "各月报警",
            type: "bar",
            data: [16, 17, 47, 25, 44, 35, 42, 26],
          },
        ],
      },
      optionDay: {
        color: ["#ff7372"],
        title: {
          //    text: "各月报警",
          textStyle: {
            color: "#fff",
            fontSize: 20,
          },
        },
        grid: {
          right: "10%",
          left: "13%",
          bottom: "15%",
          top: "13%",
        },
        toolbox: {
          right: "5%",
          feature: {
            saveAsImage: {
              backgroundColor: "#0b1539",
              excludeComponents: ["dataZoom", "toolbox"],
            },
          },
          iconStyle: { borderColor: "#fff" },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        legend: { show: true, textStyle: { color: "#fff" } },
        dataZoom: {
          type: "slider",
          height: 25,
          show: true,
          startValue: 0,
          endValue: 7,
          xAxisIndex: [0],
          bottom: "0%",
        },
        xAxis: {
          axisLabel: {
            color: "#fff",
          },
          data: ["07/21", "07/22", "07/23", "07/24","07/25","07/26"],
        },
        yAxis: {
          axisLabel: {
            color: "#fff",
          },
        },
        series: [
          {
            name: "各天报警",
            type: "bar",
            data: [16, 17, 47, 25, 44, 35, 42, 26],
          },
        ],
      },
      optionDuration: {
        color: ["#ff7372"],
        title: {
          //    text: "各月报警",
          textStyle: {
            color: "#fff",
            fontSize: 20,
          },
        },
        grid: {
          right: "10%",
          left: "13%",
          bottom: "15%",
          top: "13%",
        },
        toolbox: {
          right: "5%",
          feature: {
            saveAsImage: {
              backgroundColor: "#0b1539",
              excludeComponents: ["dataZoom", "toolbox"],
            },
          },
          iconStyle: { borderColor: "#fff" },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        legend: { show: true, textStyle: { color: "#fff" } },
        dataZoom: {
          type: "slider",
          height: 25,
          show: true,
          startValue: 0,
          endValue: 7,
          xAxisIndex: [0],
          bottom: "0%",
        },
        xAxis: {
          axisLabel: {
            color: "#fff",
          },
          data: ["00:00-02:00", "02:00-04:00", "04:00-06:00", "06:00-08:00","08:00-10:00","10:00-12:00"],
        },
        yAxis: {
          axisLabel: {
            color: "#fff",
          },
        },
        series: [
          {
            name: "各时间段报警",
            type: "bar",
            data: [16, 17, 47, 25, 44, 35, 42, 26],
          },
        ],
      },
      rowStyle: {
        //  "background-color": "#0399AA",
        color: "#fff",
        height: "90px",
      },
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      let chartDom1 = document.getElementById("station-chart");
      let totalChart = echarts.init(chartDom1);
      totalChart.setOption(this.optionStation, true);
      let chartDom2 = document.getElementById("everyday-chart");
      let everydayChart = echarts.init(chartDom2);
      everydayChart.setOption(this.optionEveryday, true);
      let chartDom3 = document.getElementById("item-chart_1");
      let itemChart1 = echarts.init(chartDom3);
      itemChart1.setOption(this.optionYear, true);
      let chartDom4 = document.getElementById("item-chart_2");
      let itemChart2 = echarts.init(chartDom4);
      itemChart2.setOption(this.optionMonth, true);
      let chartDom5 = document.getElementById("item-chart_3");
      let itemChart3 = echarts.init(chartDom5);
      itemChart3.setOption(this.optionDay, true);
      let chartDom6 = document.getElementById("item-chart_4");
      let itemChart4 = echarts.init(chartDom6);
      itemChart4.setOption(this.optionDuration, true);
      window.addEventListener("resize", function () {
        totalChart.resize();
        everydayChart.resize();
        itemChart1.resize();
        itemChart2.resize();
        itemChart3.resize();
        itemChart4.resize();
      });
    },
    columnStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        return {
          background: "rgba(0,0,0,0.83)",
        };
      }
    },
    headerStyle(row, column, rowIndex, columnIndex) {
      if (columnIndex == 0) {
        return {
          background: "rgba(0,0,0,0.83)",
          color: "#fff",
        };
      } else
        return {
          color: "#fff",
          "background-color": "transparent",
        };
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding: 0 10px;
  // max-height: 100%;
  height: calc(100vh);
  width: 100%;
  background-color: #0b1539;
  z-index: 0;
}
.title-container {
  height: 70px;
  position: relative;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  line-height: 70px;
  color: #0399aa;
  z-index: 999;
  .title-img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
  }
  .bottom-line {
    position: absolute;
    height: 8px;
    width: 300px;
    border-radius: 5px;
    background-color: aqua;
    bottom: 7px;
    left: 0;
    right: 0;
    margin: auto;
  }
}
.data-container {
  width: 100%;
  height: calc(100% - 80px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left-container {
    width: 72%;
    height: 100%;
    .top-box {
      height: 80px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 5px 0;
      .info-item1 {
        width: 22%;
        height: 100%;
        display: flex;
        position: relative;
        //  border: 1px solid rgb(0, 255, 255);
        align-items: center;
        // &::before {
        //   position: absolute;
        //   top: 0;
        //   left: 0;
        //   width: 30px;
        //   height: 30px;
        //   border-left: 3px solid #02a6b5;
        //   border-top: 3px solid #02a6b5;
        //   content: "";
        // }
        &::after {
          position: absolute;
          top: 0;
          right: 0;
          width: 30px;
          height: 30px;
          border-right: 3px solid #02a6b5;
          border-top: 3px solid #02a6b5;
          content: "";
        }
        .panel-footer {
          width: 100%;
          position: absolute;
          bottom: 0;
          left: 0;
          &::before {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 30px;
            height: 30px;
            border-left: 3px solid #02a6b5;
            border-bottom: 3px solid #02a6b5;
            content: "";
          }
          // &::after {
          //   position: absolute;
          //   bottom: 0;
          //   right: 0;
          //   width: 30px;
          //   height: 30px;
          //   border-right: 3px solid #02a6b5;
          //   border-bottom: 3px solid #02a6b5;
          //   content: "";
          // }
        }
        .item-title {
          font-size: 20px;
          font-weight: bold;
          margin-left: 10px;
          color: #dcb018;
        }
        .item-data {
          font-size: 20px;
          font-weight: bold;
          color: red;
        }
      }
      .info-item2 {
        width: 22%;
        height: 100%;
        display: flex;
        position: relative;
        //  border: 1px solid rgb(0, 255, 255);
        align-items: center;
        &::before {
          position: absolute;
          top: 0;
          left: 0;
          width: 30px;
          height: 30px;
          border-left: 3px solid #02a6b5;
          border-top: 3px solid #02a6b5;
          content: "";
        }
        // &::after {
        //   position: absolute;
        //   top: 0;
        //   right: 0;
        //   width: 30px;
        //   height: 30px;
        //   border-right: 3px solid #02a6b5;
        //   border-top: 3px solid #02a6b5;
        //   content: "";
        // }
        .panel-footer {
          width: 100%;
          position: absolute;
          bottom: 0;
          left: 0;
          // &::before {
          //   position: absolute;
          //   bottom: 0;
          //   left: 0;
          //   width: 30px;
          //   height: 30px;
          //   border-left: 3px solid #02a6b5;
          //   border-bottom: 3px solid #02a6b5;
          //   content: "";
          // }
          &::after {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 30px;
            height: 30px;
            border-right: 3px solid #02a6b5;
            border-bottom: 3px solid #02a6b5;
            content: "";
          }
        }
        .item-title {
          font-size: 20px;
          font-weight: bold;
          margin-left: 10px;
          color: #dcb018;
        }
        .item-data {
          font-size: 20px;
          font-weight: bold;
          color: red;
        }
      }
    }
    .left-chart-container {
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: calc(100% - 80px);
      .left-panel {
        width: 40%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: space-between;
        margin-right: 10px;
        .month-warning-table-box {
          height: 49%;
          width: 100%;
          color: #01f7fd;
          background-color: #081630;
          border: 1px solid #02e7f3;
          position: relative;
          .title-box {
            padding-left: 10px;
            font-size: 17px;
            font-weight: bold;
            height: 30px;
            width: 100%;
            line-height: 30px;
            position: relative;
            .sub-title-img {
              position: absolute;
              width: 140px;
              height: 32px;
              top: 0;
              left: 0;
            }
          }
          .search-box {
            position: absolute;
            top: 10px;
            right: 10px;
            ::v-deep .el-form-item__label {
              color: #6da7f0;
            }
            ::v-deep .el-input__inner {
              background-color: transparent !important;
              border: 1px solid #75f9fd;
            }
          }
          .warning-table {
            padding: 0px 10px;
            height: 100%;
            margin-top: 25px;
            width: 100%;
            ::v-deep .el-table,
            ::v-deep .el-table tr,
            ::v-deep .el-table th {
              background-color: transparent;
            }
            ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
              background-color: #212e3e !important;
            }
            ::v-deep .el-table__body tr.hover-row > td {
              background-color: #212e3e !important;
            }
          }
        }
        .station-warning-chart-box {
          height: 49%;
          width: 100%;
          position: relative;
          //   border-top: 1px solid #01f7fd;
          //  margin-bottom: 10px;
          &::before {
            position: absolute;
            top: 0;
            left: 0;
            width: 30px;
            height: 30px;
            border-left: 5px solid #02a6b5;
            border-top: 5px solid #02a6b5;
            content: "";
          }
          &::after {
            position: absolute;
            top: 0;
            right: 0;
            width: 30px;
            height: 30px;
            border-right: 5px solid #02a6b5;
            border-top: 5px solid #02a6b5;
            content: "";
          }
          .panel-footer {
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            &::before {
              position: absolute;
              bottom: 0;
              left: 0;
              width: 30px;
              height: 30px;
              border-left: 5px solid #02a6b5;
              border-bottom: 5px solid #02a6b5;
              content: "";
            }
            &::after {
              position: absolute;
              bottom: 0;
              right: 0;
              width: 30px;
              height: 30px;
              border-right: 5px solid #02a6b5;
              border-bottom: 5px solid #02a6b5;
              content: "";
            }
          }
          .title-box {
            padding-left: 10px;
            margin-left: 5px;
            margin-top: 5px;
            font-size: 18px;
            font-weight: bold;
            height: 30px;
            width: 100%;
            line-height: 30px;
            color: #01f7fd;
            position: relative;
            .sub-title-img {
              position: absolute;
              width: 140px;
              height: 32px;
              top: 0;
              left: 0;
            }
          }
          .month-warning-form {
            position: absolute;
            left: 0;
            right: 0;
            top: 35px;
          }
          .station-chart-panel {
            width: 100%;
            height: 77%;
            margin-top: 50px;
            //    margin-bottom: 10px;
            //    background-color: #3f0426;
            padding: 0 10px;
            .station-chart {
              height: 100%;
              width: 100%;
            }
          }
        }
      }
      .right-panel {
        width: 60%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
        .everyday-warning-chart-box {
          width: 100%;
          height: 51%;
          .title {
            font-size: 18px;
            font-weight: bold;
            height: 35px;
            line-height: 35px;
            background: url(../../../assets/imgs/title_3.svg);
            background-size: cover;
            color: #01f7fd;
          }
          .everyday-warning-form {
            height: 35px;
          }
          .everyday-chart-box {
            height: calc(100% - 90px);
            width: 100%;
            .everyday-chart {
              width: 100%;
              height: 100%;
            }
          }
        }
        .everyday-hot-warning-list-box {
          width: 100%;
          height: 49%;
          .title {
            font-size: 18px;
            font-weight: bold;
            height: 35px;
            line-height: 35px;
            background: url(../../../assets/imgs/title_3.svg);
            background-size: cover;
            color: #01f7fd;
            margin-bottom: 5px;
          }
          .item-list {
            width: 100%;
            height: calc(100% - 42px);
            overflow: auto;
            .item {
              height: 50px;
              width: 100%;
              background-color: #094261;
              //    opacity: 0.2;
              margin-bottom: 7px;
              border-radius: 25px;
              position: relative;
              line-height: 50px;
              .name {
                color: rgb(255, 0, 0);
                z-index: 999;
                font-size: 20px;
                margin-left: 50px;
              }
              .number {
                color: white;
                font-size: 20px;
                font-weight: bold;
                margin-left: 55%;
              }
            }
          }
        }
      }
    }
  }
  .right-container {
    width: 27%;
    height: 100%;
    .title {
      font-size: 18px;
      font-weight: bold;
      height: 35px;
      line-height: 35px;
      background: url(../../../assets/imgs/title_3.svg);
      background-size: cover;
      color: #01f7fd;
      margin-bottom: 10px;
    }
    .chart-box {
      width: 100%;
      height: calc(100% - 35px);
      // height: 100%;
      overflow: auto;

      .item-chart-box {
        width: 100%;
        height: 350px;
        margin-bottom: 20px;
        .item-chart {
          height: 315px;
          width: 100%;
        }
      }
    }
  }
}
::v-deep input::-webkit-input-placeholder {
  color: #69abff;
}
::v-deep input::-moz-input-placeholder {
  color: #69abff;
}
::v-deep input::-ms-input-placeholder {
  color: #69abff;
}
//修改form表单label
::v-deep .el-form-item__label {
  color: #fff;
  font-size: 13px;
}
::v-deep .el-input__inner {
  background-color: transparent !important;
  border: 0.5px solid #bbbbbb;
  color: #69abff;
}
::v-deep .el-range-input {
  background-color: transparent !important;
  color: #69abff;
}
::v-deep .el-range-separator {
  color: #efefef;
}
.item-list::-webkit-scrollbar {
  display: none;
}
.chart-box::-webkit-scrollbar {
  display: none;
}
</style>
